<template>
	<view class="page">
		<view class="content">
			<!-- 顶部logo -->
			<view class="logo-section">
				<image class="logo" src="/static/icons/logo.svg" mode="aspectFit"></image>
				<text class="brand-name">老火锅</text>
			</view>
			
			<!-- 欢迎信息 -->
			<view class="welcome-section">
				<text class="welcome-text">欢迎光临</text>
				<text class="store-name">「老火锅·南山店」</text>
			</view>
			
			<!-- 桌号信息 -->
			<view class="table-info">
				<text class="table-label">桌号：</text>
				<text class="table-number">A12</text>
			</view>
			
			<!-- 优惠信息 -->
			<view class="discount-info">
				<text class="fire-icon">🔥</text>
				<text class="discount-text">当前优惠：满200减50</text>
			</view>
			
			<!-- 开始点餐按钮 -->
			<view class="start-order-btn" @click="showTableSelect">
				<image class="pot-icon" src="/static/icons/pot-icon.svg" mode="aspectFit"></image>
				<text>立即开始点餐</text>
			</view>
			
			<!-- 桌号选择弹窗 -->
			<view class="table-select-popup" v-if="showTableDialog">
				<view class="popup-mask" @click="closeTableSelect"></view>
				<view class="popup-content">
					<view class="popup-header">
						<text class="popup-title">请选择桌号</text>
						<text class="popup-close" @click="closeTableSelect">×</text>
					</view>
					<view class="table-input-area">
						<input 
							type="number" 
							v-model="tableNo" 
							placeholder="请输入桌号"
							class="table-input"
							maxlength="4"
						/>
					</view>
					<view class="quick-select">
						<text>快速选择：</text>
						<view class="table-grid">
							<view 
								class="table-item" 
								v-for="num in 8" 
								:key="num"
								@click="selectTable('A' + num)"
							>A{{num}}</view>
						</view>
					</view>
					<view class="popup-footer">
						<view class="confirm-btn" @click="confirmTableNo">确认选择</view>
					</view>
				</view>
			</view>
			
			<!-- 底部信息 -->
			<view class="bottom-info">
				<view class="member-info">
					<image class="user-icon" src="/static/icons/user-icon.svg" mode="aspectFit"></image>
					<text>登录/绑定会员，享专属优惠</text>
				</view>
				<view class="location-info">
					<image class="location-icon" src="/static/icons/location-icon.svg" mode="aspectFit"></image>
					<text>重庆市南山风景区8号</text>
				</view>
				<view class="time-info">
					<image class="time-icon" src="/static/icons/time-icon.svg" mode="aspectFit"></image>
					<text>营业时间 10:00 - 22:30</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { onLoad, onShow } from "@dcloudio/uni-app";
	import request from "/common/api.js"
	const model = ref([])
	const tableNo = ref('')
	const showTableDialog = ref(false)

	// 显示桌号选择弹窗
	const showTableSelect = () => {
		showTableDialog.value = true
	}

	// 关闭桌号选择弹窗
	const closeTableSelect = () => {
		showTableDialog.value = false
		tableNo.value = ''
	}

	// 快速选择桌号
	const selectTable = (num) => {
		tableNo.value = num
	}

	// 确认桌号
	const confirmTableNo = () => {
		if (!tableNo.value) {
			uni.showToast({
				title: '请输入桌号',
				icon: 'none'
			})
			return
		}
		
		// 跳转到点餐页面
		uni.navigateTo({
			url: `/pages/functions/scan_order?tableNo=${tableNo.value}`
		})
		closeTableSelect()
	}

	onShow(() => {
		 
	})

    onLoad(()=>{
        //request.loadPostData("/appMenu/list", {}, model)
    })
</script>

<style>
	.page {
		background-color: #B42C28;
		min-height: 100vh;
		padding: 40rpx;
	}
	
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #FFE5B4;
	}
	
	.logo-section {
		display: flex;
		align-items: center;
		margin-bottom: 60rpx;
	}
	
	.logo {
		width: 80rpx;
		height: 80rpx;
		margin-right: 20rpx;
	}
	
	.brand-name {
		font-size: 48rpx;
		font-weight: bold;
	}
	
	.welcome-section {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 40rpx;
	}
	
	.welcome-text {
		font-size: 60rpx;
		margin-bottom: 20rpx;
	}
	
	.store-name {
		font-size: 48rpx;
	}
	
	.table-info {
		margin-bottom: 30rpx;
	}
	
	.table-number {
		font-size: 40rpx;
		font-weight: bold;
	}
	
	.discount-info {
		background-color: rgba(255, 255, 255, 0.1);
		padding: 20rpx 40rpx;
		border-radius: 30rpx;
		margin-bottom: 60rpx;
	}
	
	.start-order-btn {
		background-color: #FFB74D;
		width: 80%;
		padding: 30rpx 0;
		border-radius: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #B42C28;
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 80rpx;
	}
	
	.pot-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}
	
	.bottom-info {
		width: 100%;
	}
	
	.bottom-info > view {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		font-size: 28rpx;
	}
	
	.bottom-info image {
		width: 32rpx;
		height: 32rpx;
		margin-right: 16rpx;
	}

	/* 弹窗样式 */
	.table-select-popup {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
	}

	.popup-mask {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.6);
	}

	.popup-content {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #FFFFFF;
		border-radius: 40rpx 40rpx 0 0;
		padding: 40rpx;
	}

	.popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 40rpx;
	}

	.popup-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #2C3E50;
	}

	.popup-close {
		font-size: 48rpx;
		color: #95A5A6;
		padding: 20rpx;
	}

	.table-input-area {
		margin-bottom: 40rpx;
	}

	.table-input {
		width: 100%;
		height: 88rpx;
		background-color: #F8F9FA;
		border-radius: 44rpx;
		padding: 0 40rpx;
		font-size: 32rpx;
		color: #2C3E50;
		border: 2rpx solid #E9ECEF;
	}

	.quick-select {
		margin-bottom: 40rpx;
	}

	.quick-select text {
		font-size: 28rpx;
		color: #7F8C8D;
		margin-bottom: 20rpx;
		display: block;
	}

	.table-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 20rpx;
	}

	.table-item {
		height: 88rpx;
		background-color: #F8F9FA;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		color: #2C3E50;
	}

	.table-item:active {
		background-color: #FFE5B4;
		color: #B42C28;
	}

	.popup-footer {
		margin-top: 40rpx;
	}

	.confirm-btn {
		width: 100%;
		height: 88rpx;
		background: linear-gradient(135deg, #FF6B6B, #B42C28);
		border-radius: 44rpx;
		color: #FFFFFF;
		font-size: 32rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.confirm-btn:active {
		opacity: 0.9;
	}
</style>
